<template>
  <div>
    <el-card>
      <div slot="header"><el-page-header @back="back" content="上架车位"></el-page-header></div>
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="上架备注">
            <el-input v-model="form.name" class="my-input"></el-input>
          </el-form-item>
          <transition name="el-zoom-in-center">
            <el-form-item label="开售时间" v-if="form.saleType != '包销代理'">
              <el-date-picker
                class="my-input"
                v-model="form.startDateTime"
                type="datetime"
                placeholder="datetime"
              ></el-date-picker>
            </el-form-item>
          </transition>
          <transition name="el-zoom-in-center">
            <el-form-item label="停售时间" v-if="form.saleType != '包销代理'">
              <el-date-picker
                class="my-input"
                v-model="form.endDateTime"
                type="datetime"
                placeholder="datetime"
              ></el-date-picker>
            </el-form-item>
          </transition>
          <el-form-item label="销售对象">
            <el-radio-group v-model="form.customType">
              <el-radio
                :label="item"
                v-for="item in customTypes"
                :key="item"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="销售方式">
            <el-radio-group v-model="form.saleType">
              <el-radio
                v-for="item in saleTypes"
                :key="item"
                :label="item"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card v-if="compomentName != 'ordinarySales'">
      <div slot="header">具体配置</div>
      <div>
        <keep-alive>
          <component :is="compomentName" :callbackdata="callbackdata"></component>
        </keep-alive>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="6" :offset="9">
        <el-button type="primary" class="submit" round @click="add">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ordinarySales from "@/components/salesType/ordinarySales";
import lotterySales from "@/components/salesType/lotterySales";
import agentSales from "@/components/salesType/agentSales";
import underwriteSales from "@/components/salesType/underwriteSales";
let copyAttr = function(target,resourse){
  for(let i in resourse){
    target[i] = resourse[i]
  }
  console.log('target',target)
}
export default {
  components: {
    ordinarySales,
    lotterySales,
    agentSales,
    underwriteSales,
  },
  methods: {
    add(){
      switch(this.form.saleType){
        case "直接销售":
          copyAttr(this.form,{})
          break
        case "摇号销售":
          copyAttr(this.form,this.lottery_config)
          break
        case "分销代理":
          copyAttr(this.form,this.agent_config)
          break
        case "包销代理":
          copyAttr(this.form,this.under_config)
          break
      }
      this.form.final_startDate = String(this.form.startDateTime)
      this.form.final_endDate = String(this.form.endDateTime)
      this.$store.commit('insert_salse',this.form)
    },
    back() {
      this.$router.go(-1);
    },
  },
  watch: {
    "form.saleType": function () {
      console.log("change");
    },
  },
  computed: {
    ...mapState(['agent_config','lottery_config','under_config']),
    compomentName() {
      let currentType = this.form.saleType;
      switch (currentType) {
        case "直接销售":
          return "ordinarySales";
        case "摇号销售":
          return "lotterySales";
        case "分销代理":
          return "agentSales";
        case "包销代理":
          return "underwriteSales";
      }
    },
  },
  data() {
    return {
      callbackdata:{},
      componentId: "",
      outTimeTypes: ["自动修改", "手动修改"],
      saleTypes: ["直接销售", "摇号销售", "包销代理", "分销代理"],
      customTypes: ["业主", "所有人"],
      agent_sale_config:{
        jurisdiction: [],
        minPrice: "",
        maxPrice: "",
      },
      form: {
        name: "",
        startDateTime: "",
        endDateTime: "",
        outTimeType: "自动修改",
        customType: "业主",
        saleType: "直接销售",
      },
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
}
.el-form-item {
  width: 80%;
  margin: 20px auto;
}
.my-input {
  width: 80%;
}
.submit {
  margin-top: 2rem;
  width: 100%;
}
</style>
